<template>
    <div class='tableEdit' :style="heights">
        
        <table cellspacing=0 cellpadding=0>
            <colgroup>
                <col v-for="(item,index) in listField" :key="index" :style='item.width'/>
            </colgroup>
            <tr>
                <th v-for="(item,index) in listField" :key="index">
                    {{item.label}}
                </th>
            </tr>
            <tr v-for="(item,index) in tableDataNew" :key="index">
                <td v-for="(field,index2) in listField" :key="index2">
                    <input-noborder :dataField="dataField" :id="field.id" :data="data" :exdata="index" @input="tableChangeData"  :isreadonly="field.isReadOnly"  v-if="field.type=='text'"></input-noborder>
                    
                    <input-select :dataField="dataField"  :id="field.id" isBorder='N'  :styles="field.width" :options="field.dataSource" :index="index"   :data="data"  @input="tableChangeData" :isreadonly="field.isReadOnly" v-if="field.type=='select'" ></input-select>
                    <input-date :dataField="dataField"  :id="field.id"   isBorder='N'  :styles="field.width"  :index="index"  :data="data"  @input="tableChangeData" v-if="field.type=='date'"></input-date>

                </td>
            </tr>
            
        </table>
    </div>
    
</template>
<script>

import inputNoborder  from '../input/input-noborder'
import inputSelect from '../input/input-select'
import inputDate from '../input/input-date'
export default {
    props:['dataField','tableData','listField','data','heights'],
    name: "table-edit3",
    components: {
       inputNoborder,
       inputSelect,
       inputDate
    },
    data(){
        return{
            
        }
    },
    created(){
       
    }, 
    methods:{
        addRow(){
            let datas={};
            for(let i=0;i<this.listField.length;i++){
                datas[this.listField[i].id]='';
            }

            
            this.$set(this.data[this.dataField],this.data[this.dataField].length,datas);
        },
        changeAmt(exdata){
            let exkey="";
            let extype="";
            let num=0;
            let amt=0;
            let total_amt=0;
            let total_amt_key="";
            for(let i=0;i<this.listField.length;i++){
                let _id=this.listField[i].id;
                let exkey_=this.listField[i].exkey;
                let extype_=this.listField[i].extype;
                if(exkey_){
                    exkey=exkey_;
                }
                if(extype_=="num"){
                    num=this.data[this.dataField][exdata][_id];
                }else if(extype_=="amt"){
                    amt=this.data[this.dataField][exdata][_id];
                }else if(extype_=="total_amt")
                    total_amt_key=_id;
            }
            if(total_amt_key){
                total_amt=num*amt;

                let data_=this.data[this.dataField][exdata];
                data_[total_amt_key]=total_amt;
                this.$set(this.data[this.dataField],exdata,data_);
               //this.setData(exdata,total_amt_key,total_amt);
            }

            total_amt=0;
            for(let i=0;i<this.data[this.dataField].length;i++){
                total_amt+=Number(this.data[this.dataField][i][total_amt_key])
            }
            if(exkey){
                /*let data_={};
                let ids=exkey.split(".");
                let p=ids[0];
                let id_=ids[1];
                data_.pre=p;
                data_.val=total_amt;
                data_.id=id_;*/
                //this.$emit("input",JSON.stringify(data_));

                this.$set(this.data[p],id_,total_amt);

            }
        },
        tableChangeData(data){
            let datas=JSON.parse(data);
            let id=datas.id;
            let val=datas.val;
            let exdata=datas.exdata;
            let index=datas.index;
            if(exdata==undefined||exdata=="undefined"){
                datas.exdata=index;
                exdata=index;
            }
            let data_=this.data[this.dataField][exdata];
            data_[id]=val;
            this.$set(this.data[this.dataField],exdata,data_)
           
            this.changeAmt(exdata);
        },
        addItem(data){
            let data_=JSON.parse(data);
           /* let data__={};
            data__.pre=this.dataField;
            data__.val=data;
            data__.exdata=this.tableDataNew.length;*/


            let isOk=true;
            for(let i=0;i<this.data[this.dataField].length;i++){
                let keys=this.data[this.dataField][i].keys;
                let keys_=data_.keys;
                if(keys==keys_&&keys)
                    isOk=false;
            }
            if(isOk){
                this.$set(this.data[this.dataField],this.data[this.dataField].length,data_);
                
                
                //this.tableDataNew.push(data_);
                this.changeAmt(this.data[this.dataField].length-1);
               // this.$emit("input",JSON.stringify(data__));
            }
                

        },
        getData(){
             return this.data[this.dataField];
        },
        setData(exdata,id,val){
            
            
        }
    }
}
</script>
<style scoped>
    table{
        width:100%;
        border-collapse: collapse;
    }
    th{
        border:1px solid #409EFF;
        padding:5px;
        background:#409EFF;
        color:#fff;
        
    }
    td{
        border:1px solid #ddd;
    }
    input{
        border:0;
    }
    .tableEdit{
        
        overflow:auto;
        text-align:left;
    }
</style>